<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关系图谱</title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
		<style>
			html,
			body {
				height: 100%;
				background-color: #fff;
			}

			body {
				height: calc(100% - 10px);
			}
			
			#Main {
				background-color: #fff;
			}

			.toolbox {
				position: absolute;
				right: 10px;
				bottom: 40px;
				font-size: 18px;
				z-index: 20;
			}

			ul {
				width: 48px;
				margin: 0px;
				padding: 0px;
				box-sizing: border-box;
				border: 1px solid #eee;
				background: #fff;
				border-radius: 4px;

				display: block;
				list-style-type: disc;
				margin-block-start: 1em;
				margin-block-end: 1em;
				margin-inline-start: 0px;
				margin-inline-end: 0px;
				padding-inline-start: 0px;
			}

			ul li {
				width: 46px;
				height: 52px;
				text-align: center;
				box-sizing: border-box;
				font-size: 11px;
				color: #666;
				padding: 7px 0 0 0;
				list-style-type: none;
				cursor: pointer;
				user-select: none;
				position: relative;
				line-height: 20px;
				vertical-align: middle;
			}

			ul li .icon {
				display: flex;
				justify-content: center;
			}

			ul li .text {
				line-height: 18px;
				margin-top: 5px;
			}
			
			ul > li:hover {
				cursor: pointer;
				background-color: #4ea2f0;
				color: #fff;
			}

			ul>*:first-child {
				border-top: none;
			}
			
			.msg {
				text-align: center;
				height: 30px;
			}
			.msg > div > div {
				display: inline-block;
			}
			
			.active {
				background-color: #4ea2f0;
				color: #fff;
			}
			
		</style>
	</head>
	<body>
		<div id="Main">
			<div style="width: 100%;height: calc(100vh - 40px);" >
				<div id="MainCy" style="width:100%;height:100%;"></div>
			</div>
			<div class="toolbox">
				<ul>
					<!-- <li id="LiSel">
						<div class="icon"><i class="fa fa-bars fa-lg"></i></div>
						<div class="text">模板</div>
					</li> -->
					<li id="LiFont" class="active">
						<div class="icon"><i class="fa fa-font fa-lg"></i></div>
						<div class="text">文字</div>
					</li>
					<li id="zoomIn">
						<div class="icon"><i class="fa fa-plus-square-o fa-lg"></i></div>
						<div class="text">放大</div>
					</li>
					<li id="zoomOut">
						<div class="icon"><i class="fa fa-minus-square-o fa-lg"></i></div>
						<div class="text">缩小</div>
					</li>
					<li id="LiRefresh">
						<div LiRefresh="icon"><i class="fa fa-refresh fa-lg"></i></div>
						<div class="text">刷新</div>
					</li>
					<li id="LiFullScreen">
						<div class="icon"><i class="fa fa-arrows-alt fa-lg" id="fullScreenicon"></i></div>
						<div class="text" id="fullScreenText">全屏</div>
					</li>
					<li id="LiSave">
						<div class="icon"><i class="fa fa-floppy-o fa-lg"></i></div>
						<div class="text">保存</div>
					</li>
				</ul>
			</div>
			
			<div class="msg">
				<div style="margin: 0px auto; width: 460px;">
					<div >
						<span class="fa fa-circle"style="color: rgb(255, 158, 0);"></span> 
						<span >当前结点</span>
					</div>
					<div >
						<span class="fa fa-circle" style="color: rgb(78, 162, 240);"></span>
						<span >企业</span>
					</div>
					<div >
						<span class="fa fa-circle" style="color: rgb(255, 96, 96);"></span>
						<span >人员</span>
					</div>
					<div >
						<span class="fa fa-long-arrow-right" style="color: rgb(255, 96, 96);"></span>
						<span >投资</span>
					</div>
					<div >
						<span class="fa fa-long-arrow-right" style="color: rgb(78, 162, 240);"></span>
						<span >任职</span>
					</div>
				</div>
			</div>
		</div>
		
		<script src="jquery-1.8.2.min.js"></script>
		<script src="cytoscape.min.js"></script>
		<script src="d3.v4.js"></script>
		<script src="tools.js"></script>
		<script src="render.js"></script>
	</body>
</html>
